<template>
  <div class="strategyControl">
    <template v-if="isAdded">
      <!-- <my-search-form
        v-bind="searchFormConfig"
        @search="search"
        @navTabsChange="navTabsChange"
        @added="added"
      /> -->
      <div class="myForm">
        <div class="navTabs">
          <template v-for="(item, index) in searchFormConfig.navTabs">
            <div class="tabs" @click="navTabsChange(index)" :class="{ activeTabs: currentIdx === index }" :key="item"
              :style="tabsStyle">
              {{ item }}
            </div>
          </template>
        </div>
        <div class="form">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item size="mini">
              <el-button type="info" icon="el-icon-plus" @click="added">新增</el-button>
            </el-form-item>
            <el-form-item label="所属组织" size="mini">
              <el-cascader ref="cascader" v-model="option1" :options="zuzhiTree" :props="defaultProps2"
                @change="zuzhiChange" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="策略名称" size="mini">
              <el-input v-model="formInline.name" placeholder="策略名称"></el-input>
            </el-form-item>
            <el-form-item label="规则类型" size="mini">
              <el-select v-model="formInline.triggerType" clearable placeholder="规则类型">
                <el-option label="手动" value="manual"></el-option>
                <el-option label="设备" value="device"></el-option>
                <el-option label="定时" value="timer"></el-option>
                <el-option label="场景" value="scene"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini">
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- <contextual-model :title="title" :data="data"/> -->
      <div class="contextualModel">
        <div class="boxContent">
          <template v-for="item in formData">
            <div class="boxItem" :key="item.id">
              <div class="top">
                <div class="title">{{ title }}：{{item.name}}（{{item.state == 'disable'?'已作废':item.state == 'started'?'启用中':item.state == 'stopped'?'已停用':''}}）</div>
                <div class="btnGroup">
                  <el-button size="mini">操作</el-button>
                  <el-button size="mini">详情</el-button>
                </div>
              </div>
              <div class="statusBox">
                <div class="statusItem" v-for="item in 4" :key="item">
                  <img :src="icon" alt="加载失败" />
                  <div class="text">智能照明</div>
                </div>
              </div>
              <div class="footer">
                <el-button size="mini" type="info">启用</el-button>
                <div class="dateTime">上次执行时间：2021-07-30 09:10:21</div>
              </div>
            </div>
          </template>
        </div>

        <div class="pagination">
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="pageInfo.currentPage"
            :page-size="pageInfo.pageSize" layout="total, prev, pager, next" :total=total />
        </div>
      </div>

      <!-- 2022.4.20取消联动中心的列表模式 -->
      <!-- <linkage-centent /> -->
    </template>

    <!-- 为了三级面包屑才添加了一个routerView 不然无法实现 -->
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
  import ContextualModel from "./src/cpns/contextualModel.vue";
  import LinkageCentent from "./src/cpns/linkageCenter.vue";
  import mySearchForm from "@/components/mySearchForm/mySearchForm";

  import { searchFormConfig } from "./src/config/searchFormConfig";
  import { engineInstancePage, orgTree } from '../../url/api';
  export default {
    components: { mySearchForm, ContextualModel, LinkageCentent },
    data() {
      return {
        option1: [],
        zuzhiTree: [],
        defaultProps2: {
          children: 'children',
          label: 'name',
          value: 'id',
          expandTrigger: 'hover',
          checkStrictly: true,
        },
        currentIdx: 0,
        isAdded: true,
        searchFormConfig,
        formData: {},
        icon: require("@/assets/images/strategyControl_0.png"),
        pageInfo: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        tabsStyle: '',
        formInline: {},
      };
    },
    computed: {
      title() {
        return this.searchFormConfig.navTabs[this.currentIdx];
      }
    },
    watch: {
      $route(newVal) {
        this.currentIdx = 0;
        if (newVal.path === "/iot_rule") {
          this.isAdded = true;
        }
      }
    },
    created() {
      //判断下路由 然后是否处于添加 是则放出routerView
      if (this.$route.path === "/iot_rule/addedLinkage") {
        this.isAdded = false;
      }
    },
    methods: {
      zuzhiChange(value) {
        //改变组织
        if (value.length != 0) {
          console.log(value);
          this.formInline.orgId =
            this.$refs.cascader.getCheckedNodes()[0].data.id;
        } else {
          this.formInline.orgId = '';
        }
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      navTabsChange(i) {
        this.currentIdx = i;
        this.searchFormConfig.defaultIdx = i;
        console.log(this.currentIdx, "测试tab");
        let modelType = null;
        if (i == 0) {
          modelType = 'scene_mode'//情景模式
        } else if (i == 1) {
          modelType = 'linkage_mode'//场景联动
        }
        this.searchFormConfig.routerSkip.query.index = i;
        this.searchFormConfig.routerSkip.query.modelType = modelType;
      },
      search() {
        this.formInline.modelType = this.searchFormConfig.routerSkip.query.index == 1?'linkage_mode':'scene_mode'
        let params = JSON.parse(JSON.stringify(this.formInline))
        // debugger
        engineInstancePage(params).then((res) => {//规则实例分页列表
          console.log(res,"aaaaaaaaaaaa")
          if (res.data.ok) {
            this.formData = res.data.data.records.filter((item) => {
              return item
            })
            this.total = res.data.data.total
          } else {
            this.$message(res.data.msg);
          }
        })
      },
      added() {
        this.$router.push({
          path: "/iot_rule/addedLinkage",
          query: {
            index: this.searchFormConfig.routerSkip.query.index,
            modelType: this.searchFormConfig.routerSkip.query.modelType,
          },
          // params: {
          //   ...this.routerSkip.params
          // }
        });
        this.isAdded = false;
      },
      getInit() {
        let org_tree = {
          name: '',
          status: 1,
        };
        orgTree(org_tree).then((res) => {
          //获取组织列表
          console.log(res);
          if (res.data.ok) {
            this.zuzhiTree = res.data.data;
          }
        });
        this.search();
      }
    },
    mounted() {
      // console.log(this.houseId, this.houseName);
      this.getInit();
    },
  };
</script>

<style lang="scss" scoped>
  .navTabs {
    font-size: 14px;

    div {
      display: inline-block;
      background-color: rgba(219, 219, 219, 100);
    }

    // display: flex;
    // align-items: center;
    .activeTabs {
      background-color: #fff;
      border: 1px solid rgba(0, 176, 158, 100);
    }

    .tabs {
      padding: 10px 35px;
      cursor: pointer;
    }
  }

  @mixin flexLayout {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .contextualModel {
    margin-right: 10px;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    padding-bottom: 40px;
    min-height: 62vh;
    position: relative;

    .boxContent {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .boxItem {
        width: calc((100% / 3) - 76px);
        border: 1px solid rgba(187, 187, 187, 100);
        padding: 18px 21px;
        margin-right: 38px;
        margin-bottom: 19px;
        border-radius: 3px;

        &:nth-child(3n) {
          margin-right: 0;
        }

        .top {
          @include flexLayout;

          .title {
            font-weight: 550;
            color: rgba(16, 16, 16, 100);
            font-size: 17px;
            font-family: SourceHanSansSC-bold;
          }

          /deep/ .el-button--mini,
          .el-button--mini.is-round {
            padding: 4px 15px;
          }
        }

        .statusBox {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 16px;
          margin-bottom: 10px;

          .statusItem {
            margin-right: 17px;
            width: 93px;
            height: 87px;
            line-height: 20px;
            border-radius: 10px 10px 10px 10px;
            text-align: center;
            border: 1px solid rgba(187, 187, 187, 100);
            box-sizing: border-box;
            font-family: SourceHanSansSC-regular;
            font-size: 14px;

            &:nth-child(4n) {
              margin-right: 0;
            }

            img {
              margin-top: 8px;
              width: 38px;
              height: 45px;
            }
          }
        }

        .footer {
          @include flexLayout;

          /deep/ .el-button {
            padding: 7px 40px;
          }

          .dateTime {
            color: rgba(96, 96, 96, 100);
            font-family: SourceHanSansSC-regular;
          }
        }
      }
    }

    .pagination {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  /deep/ .el-button--info {
    color: #101010;
    background-color: #dbdbdb;
    border-color: #dbdbdb;
  }
  .myForm {
    @include flexLayout;
    background-color: #fff;
    padding: 10px;
    .navTabs {
      display: flex;
      align-items: center;
      background-color: rgba(219, 219, 219, 100);
      .activeTabs {
        background-color: #fff;
        border: 1px solid rgba(0, 176, 158, 100);
      }
      .tabs {
        padding: 10px 35px;
        cursor: pointer;
      }
    }
    .form {
      display: flex;
      align-items: center;
      /* .btnGroup {
        margin-right: 10px;
      } */
      /deep/ .el-form-item--mini{
        margin-bottom: 0px;
      };
      /* /deep/ .el-form--inline {
        margin: 10px 10px 0px 0px;
        .el-form-item__content {
          width: 160px;
        }
      } */
    }
  }
</style>